<script setup>
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  import WeatherCard from '@/components/WeatherCard.vue'
  import weather1 from '@/assets/天气1.png'
  import weather2 from '@/assets/天气2.png'
  import weather3 from '@/assets/天气3.png'
  import weather4 from '@/assets/天气4.png'
  import { useProvinceWeather } from '@/composables/useProvinceWeather'

  const router = useRouter()
  // 轮播图
  const weatherImages = ref([
    { id: 1, url: weather1, alt: '晴天' },
    { id: 2, url: weather2, alt: '雨天' },
    { id: 3, url: weather3, alt: '多云' },
    { id: 4, url: weather4, alt: '雪天' }
  ])
  
  // 子组件省份标题
  const provinceData = ref({
    title: '省份天气'
  })

  // 省份天气数据
  const { weatherList } = useProvinceWeather()

  // 点击跳转
  const onSkip = province => {
    router.push(`/province/${province}`)
  }
</script>

<template>
  <div class="weather-container">
    <!-- 轮播图部分 -->
    <div class="weather-carousel">
      <el-carousel
        trigger="click"
        height="400px"
        :interval="3000"
        arrow="always"
      >
        <el-carousel-item v-for="item in weatherImages" :key="item.id">
          <img
            class="carousel-image"
            :src="item.url"
            :alt="item.alt"
            draggable="false"
          />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 省份天气卡片 -->
    <WeatherCard :title="provinceData">
      <div
        v-for="(province, index) in weatherList"
        :key="index"
        class="weather-card"
        @click="onSkip(province.province)"
      >
        <div class="city">{{ province.province }}</div>
        <div class="weather-content">
          <el-icon
            :size="24"
            class="weather-icon"
            :style="{ color: province.color }"
          >
            <component :is="province.icon" theme="outline" />
          </el-icon>
          <div class="weather-info">
            <span>{{ province.weather }}</span>
            <span>{{ province.temp }}℃</span>
          </div>
        </div>
      </div>
    </WeatherCard>
  </div>
</template>

<style scoped>
  /* 统一容器设置 */
  .weather-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

  /* 轮播图样式 */
  .weather-carousel {
    margin: 20px 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* 天气卡片 */
  .weather-card {
    background: white;
    border-radius: 6px;
    padding: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s;
  }

  .weather-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  .city {
    font-weight: 600;
    font-size: 14px;
    color: #303133;
    margin-bottom: 8px;
  }

  .weather-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .weather-icon {
    margin-right: 6px;
  }

  .weather-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .weather-info span:first-child {
    font-size: 13px;
    color: #606266;
  }

  .weather-info span:last-child {
    font-size: 14px;
    font-weight: 500;
    color: #303133;
  }
</style>
